<template>
  <div>
    <div class="AuxiliarybuttonBox">
      <el-button type="success" size='small' @click="dialogVisible()">{{$t('新建导出任务')}}</el-button>
    </div>
    <el-table ref="multipleTable" size='mini' :data="tableList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="ID" align='center' :label="$t('编号')" min-width="50"></el-table-column>
      <el-table-column prop="from" align='center' :label="$t('起始时间')" :formatter="timeFormatter" min-width="120"></el-table-column>
      <el-table-column prop="to" align='center' :label="$t('结束时间')" :formatter="timeFormatter" min-width="120"></el-table-column>
      <el-table-column prop="mode" align='center' :label="$t('所属模块')" min-width="120">
        <template slot-scope="scope">
          {{ $t(modeListShow(scope.row.mode) || '') }}
        </template>
      </el-table-column>
      <el-table-column prop="level" align='center' :label="$t('级别')" min-width="80">
        <template slot-scope="scope">
          {{levelList[scope.row.level]}}
        </template>
      </el-table-column>
      <el-table-column prop="sip" align='center' :label="$t('源地址')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.sip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dip" align='center' :label="$t('目的地址')" min-width="110">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="sport" align='center' :label="$t('源端口')" min-width="90"></el-table-column>
      <el-table-column prop="dport" align='center' :label="$t('目的端口')" min-width="100"></el-table-column>
      <el-table-column prop="protocol" align='center' :label="$t('协议类型')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.protocol" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="event_type" align='center' :label="$t('事件类型')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.event_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="event_action" align='center' :label="$t('事件动作')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.event_action?$t('eventaction.'+scope.row.event_action):scope.row.event_action" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="progress" align='center' :label="$t('进度')" min-width="100">
        <template slot-scope="scope">
          <el-tooltip effect="light" :content="scope.row.progress + '%'" placement="top">
            <el-progress :percentage="scope.row.progress" :show-text='false'></el-progress>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' width='200' fixed="right" :label="$t('操作')">
        <template slot-scope="scope">
          <el-button type="success" plain size="mini" @click="downloadLogExport(scope.row)">{{$t('下载')}}</el-button>
          <el-button type="danger" plain size="mini" @click="deleteLogExport(scope.row)">{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <log-export-dialog v-if="logExportDialogVisible" ref="refLogExportDialogVisible"></log-export-dialog>
    <download-dialog v-if="downloadDialogVisible" ref="refDownloadDialogVisible"></download-dialog>
  </div>
</template>

<script>
import { getMode, logExportList, delLogExport } from '@/api/system/logData'
import LogExportDialog from './components/LogExportDialog.vue'
import DownloadDialog from './components/DownloadDialog'
import moment from 'moment'
export default {
  name: 'LogExport',
  components: {
    DownloadDialog,
    LogExportDialog
  },
  data () {
    return {
      downloadDialogVisible: false,
      logExportDialogVisible: false,
      tableList: [],
      modeList: null,
      levelList: {
        1: 'ERROR',
        2: 'ALERT',
        3: 'INFO',
        4: 'DEBUG'
      },
      protocolList: {
        'ICMP': 'ICMP',
        'TCP': 'TCP'
      },
      eventTypeList: {},
      eventActionList: {
        'DROP': '丢弃',
        'REJECT': '拒绝',
        'SE': '安全引擎',
        'ACCEPT': '允许',
        'ALERT': '告警',
        'RESET': '阻断',
        'RateLimit DROP': '限速丢弃',
        'BlackList DROP': '黑名单丢弃',
        'SNAT': '源地址转换',
        'DNAT': '目的地址转换'
      }
    }
  },
  created () {
    this.listData()
    getMode().then(res => {
      if (res.status === 0) {
        this.modesList = res.info
      }
    })
  },
  methods: {
    listData () {
      logExportList().then(res => {
        if (res.status === 0) {
          this.tableList = res.info
        }
      })
    },
    dialogVisible () {
      this.logExportDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refLogExportDialogVisible.init()
      })
    },
    exportSearchData () {
      this.logExportDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refLogExportDialogVisible.init(this.record)
      })
    },
    timeFormatter (row, column, cellValue, index) {
      return moment(new Date(cellValue * 1000)).format('YYYY-MM-DD HH:mm:ss')
    },
    modeListShow (mode) {
      if (this.modesList) {
        return this.modesList.filter(item => item.name === mode)[0] ? this.modesList.filter(item => item.name === mode)[0].chinese_name : mode
      }
    },
    deleteLogExport (row) {
      this.$confirm(this.$t('您是否要删除该数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delLogExport({ id: row.ID }).then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('删除成功'),
              type: 'success'
            })
            this.listData()
          }
        })
      })
    },
    // 下载
    downloadLogExport (data) {
      this.downloadDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refDownloadDialogVisible.init(data)
      })
    }
  }
}
</script>
